<template>
  <view class="container">
    <!-- 金额管理 -->
    <view class="amount_management">
      <view class="amount_management_left" v-if="isRechargeToWallet">
        <text class="amount_management_text">当前余额</text>
        <text class="amount_management_values">{{ availableBalance }}</text>
      </view>

      <view class="amount_management_left" v-if="!isRechargeToWallet">
        <text class="amount_management_text">可用短信数</text>
        <text class="amount_management_values">{{ userInfo.smsCount }}</text>
      </view>

      <view class="amount_management_right" v-if="!isRechargeToWallet">
        <text class="amount_management_text">可用电话数</text>
        <text class="amount_management_values">{{ userInfo.callMinutes }}</text>
      </view>

      <!-- 充值记录 -->
      <view class="recharge_record" @click="toRechargeHistory">
        <text class="recharge_record_text">{{ str }}</text>
      </view>
    </view>

    <!-- 选择充值类型 -->
    <view class="select_recharge_type" v-if="!isRechargeToWallet">
      <u-tabs :current="currentType" :activeStyle="{ color: '#000000BF', fontWeight: 700, fontSize: '18px' }"
        :inactiveStyle="{
          color: '#00000080',
          fontWeight: 400,
          fontSize: '15px',
        }" lineWidth="116" lineHeight="6" :list="list1" @change="change"></u-tabs>
    </view>

    <view class="select_recharge_type_text" v-else>请选择充值金额</view>

    <!-- 选择充值金额 -->
    <view class="select_recharge_amount">
      <view v-for="(item, index) in moreAmountList" :key="index" :class="{
        select_recharge_amount_content: true,
        select_recharge_amount_content_active: item.value === currentAmount,
      }" @click="amountFn(item.value)">
        {{ item.label }}
      </view>

      <view v-if="!isMoreAmount" :class="{
        select_recharge_amount_content: true,
        select_recharge_amount_content_active: isMoreAmount,
        select_recharge_amount_content_more: true,
      }" @click="isMoreAmount = true">
        <view class="title">更多金额</view>
        <view class="desc" style="font-size: 10px">￥150~￥900</view>
      </view>
    </view>

    <!-- 选择套餐 -->
    <!-- <view class="select_thali_type" v-if="!isRechargeToWallet">
      <view class="select_thali_type_text">选择套餐</view>

      <view :class="{
        select_thali_type_content: true,
        select_recharge_amount_content_active: item.value === selectedThali,
      }" v-for="(item, index) in thaliList" :key="index" @click="thaliChange(item)">
        <text>{{ item.label }}</text>
        <text>{{ item.price }}</text>
      </view>
    </view> -->

    <!-- 充值说明 -->
    <view class="select_thali_type_text" style="margin-top: 37.045rpx">充值说明</view>

    <view class="recharge_desc" v-if="!isRechargeToWallet">
      <view>1. 最低充值金额为5元。</view>
      <view>2. 电话通知价格0.1元/条。</view>
      <view>3. 短信通知价格0.1元/条。</view>
    </view>
    <view class="recharge_desc" v-else>
      <view>1. 最低充值金额为5元。</view>
    </view>

    <paymentPopup ref="paymentPopupRef" :isWallet="isRechargeToWallet" @pay="payFn" />

    <!-- 确认充值 -->
    <view class="confirm_recharge" @click="this.$refs.paymentPopupRef.show = true">
      <view class="confirm_recharge_text">确认充值</view>
    </view>
  </view>
</template>

<script>
import paymentPopup from "@/components/payment-popup/index.vue";
import { queryBalance, rechargeBalance, getUserInfo } from "@/api/index";
import { rechargePhone, rechargeSms, rechargeTraffic, testWxPay } from "../../../api";
export default {
  components: {
    paymentPopup,
  },
  data() {
    return {
      str: "充值记录 >",
      // 当前余额
      availableBalance: 0,
      // 可用短信数
      availableAmount: 39,
      // 可用电话数
      availablePhoneAmount: 39,
      // 页面参数
      options: {},
      list1: [
        {
          name: "请选择充值短信金额",
        },
        {
          name: "请选择充值电话金额",
        },
      ],
      /* 当前选中的充值金额 */
      currentAmount: 2,
      /* 充值金额选择列表 */
      amountList: [
        // {
        //   value: 2,
        //   label: "¥ 2",
        // },
        {
          value: 5,
          label: "¥ 5",
        },
        {
          value: 10,
          label: "¥ 10",
        },
        {
          value: 15,
          label: "¥ 15",
        },
        {
          value: 20,
          label: "¥ 20",
        },
        {
          value: 30,
          label: "¥ 30",
        },
        {
          value: 50,
          label: "¥ 50",
        },
        {
          value: 100,
          label: "¥ 100",
        },
        {
          value: 150,
          label: "¥ 150",
        },
        {
          value: 200,
          label: "¥ 200",
        },
        {
          value: 250,
          label: "¥ 250",
        },
        {
          value: 300,
          label: "¥ 300",
        },
        {
          value: 350,
          label: "¥ 350",
        },
        {
          value: 400,
          label: "¥ 400",
        },
        {
          value: 450,
          label: "¥ 450",
        },
        {
          value: 500,
          label: "¥ 500",
        },
        {
          value: 550,
          label: "¥ 550",
        },
        {
          value: 600,
          label: "¥ 600",
        },
        {
          value: 650,
          label: "¥ 650",
        },
        {
          value: 700,
          label: "¥ 700",
        },
        {
          value: 750,
          label: "¥ 750",
        },
        {
          value: 800,
          label: "¥ 800",
        },
        {
          value: 850,
          label: "¥ 850",
        },
        {
          value: 900,
          label: "¥ 900",
        },
      ],
      /* 套餐列表 */
      thaliList: [
        {
          value: 2,
          label: "100条电话通知+100条短信通知",
          price: "¥ 15",
        },
        {
          value: 5,
          label: "100条电话通知+100条短信通知",
          price: "¥ 25",
        },
      ],
      // 是否选择了更多金额
      isMoreAmount: false,
      // 选择了哪个套餐
      selectedThali: 0,
      currentType: 0,
      userInfo: {}
    };
  },

  // 如果点击了更多金额，才显示200以上的,使用计算属性完成
  computed: {
    moreAmountList() {
      if (this.isMoreAmount) {
        return this.amountList;
      } else {
        return this.amountList.filter((item) => item.value < 150);
      }
    },
    // 当前类型是否是 充值到钱包
    isRechargeToWallet() {
      return this.currentType == 2;
    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    console.log("options", options);
    // type为0充值短信，1是充值电话，2是充值到钱包
    this.currentType = options.type * 1;

    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  async onShow() {
    this.getInfo();

    try {
      const _Res = await getUserInfo();

      console.log('_Res_Res', _Res);
      this.userInfo = _Res;

    } catch (error) {

    }
  },

  methods: {
    async getInfo() {
      const _res = await queryBalance();

      console.log("_res", _res);

      this.availableBalance = _res.availableBalance;
    },
    change(item) {
      console.log("itemitemitemitemitem", item.index);
      this.currentType = item.index;
    },
    toRechargeHistory() {
      uni.navigateTo({
        url: "/pages/index/recharge/rechargeHistory/index",
      });
    },
    amountFn(value) {
      // 重置套餐数值
      this.selectedThali = 0;
      this.currentAmount = value;
      // this.isMoreAmount = false;
    },
    thaliChange(item) {
      this.currentAmount = 0;
      this.selectedThali = item.value;
    },
    async payFn() {
      try {
        console.log('this.currentAmount', this.currentAmount);

        if (this.currentType == 0) {
          const _res = await rechargeSms({
            amount: this.currentAmount

          });

          // 拉起微信支付
          uni.requestPayment({
            provider: 'wxpay',
            timeStamp: _res.timeStamp,
            nonceStr: _res.nonceStr,
            package: _res.package,
            signType: _res.signType,
            paySign: _res.paySign,
            success: (res) => {
              console.log('res', res);
              uni.showToast({
                title: '支付成功',
                icon: 'success',
                mask: true
              })

              this.getInfo();

              this.$refs.paymentPopupRef.show = false;
            }
          })
        } else {
          const _res = await rechargePhone({
            amount: this.currentAmount,

          });

          // 拉起微信支付
          uni.requestPayment({
            provider: 'wxpay',
            timeStamp: _res.timeStamp,
            nonceStr: _res.nonceStr,
            package: _res.package,
            signType: _res.signType,
            paySign: _res.paySign,
            success: (res) => {
              console.log('res', res);
              uni.showToast({
                title: '支付成功',
                icon: 'success',
                mask: true
              })

              this.getInfo();

              this.$refs.paymentPopupRef.show = false;
            }
          })

        }




        console.log('_es', _res);

        // await testWxPay()
      } catch (error) { }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background: #f6f7fb;
  height: 100%;

  padding: 17.045rpx 42.614rpx 76.705rpx 42.614rpx;
}

.amount_management {
  // width: 664.773rpx;
  // height: 204.545rpx;
  border-radius: 17.045rpx 92.045rpx 17.045rpx 17.045rpx;
  background: linear-gradient(84.36deg, #8dbbf2 -21.5%, #60a4f7 15.89%);
  padding: 42.614rpx;

  color: #ffffff;

  display: flex;
  // justify-content: space-between;

  position: relative;
}

.amount_management_text {
  font-family: "Microsoft YaHei";
  font-size: 23.864rpx;
  font-weight: 400;
  line-height: 31.5rpx;
}

.amount_management_values {
  font-family: "Microsoft YaHei";
  font-size: 51.136rpx;
  font-weight: 400;
  line-height: 67.483rpx;
  text-align: left;

  margin-top: 28.977rpx;
}

.amount_management_left {
  display: flex;
  flex-direction: column;
}

.amount_management_right {
  margin-left: 85.227rpx;
  display: flex;
  flex-direction: column;
}

.recharge_record {
  width: 173.864rpx;
  height: 57.955rpx;
  border-radius: 42.614rpx 0rpx 0rpx 42.614rpx;

  font-family: "Microsoft YaHei";
  font-size: 20.455rpx;
  font-weight: 400;
  line-height: 27rpx;

  background: #8dbbf2;

  position: absolute;
  right: 0;
  /* 上下居中 */
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  justify-content: center;
  align-items: center;
}

.select_recharge_type {}

.select_recharge_type_text {
  font-family: "Microsoft YaHei";
  font-size: 27.273rpx;
  font-weight: 400;
  line-height: 36rpx;
  text-align: left;

  margin-top: 25.568rpx;
  margin-bottom: 25.568rpx;
}

.select_recharge_amount {
  display: flex;
  // gap: 17.045rpx;
  flex-wrap: wrap;
  gap: 30.682rpx;

  margin-top: 23.864rpx;

  .select_recharge_amount_content {
    width: 201.136rpx;
    height: 80.114rpx;
    background: #ffffff;

    display: flex;
    justify-content: center;
    align-items: center;

    // font-family: 'Microsoft YaHei';
    // font-size: 25.568rpx;
    // font-weight: 290;
    // line-height: 34.006rpx;
    font-family: "Microsoft YaHei";
    font-size: 35.795rpx;
    font-weight: 290;
    line-height: 47.608rpx;

    text-align: left;
    color: #60a4f7;

    border-radius: 13.636rpx;
  }
}

.select_recharge_amount_content_active {
  background: #60a4f7 !important;
  color: #ffffff !important;
}

.select_thali_type_text {
  font-family: "Microsoft YaHei";
  font-size: 27.273rpx;
  font-weight: 400;
  line-height: 36rpx;
  text-align: left;
  color: #000000bf;
}

.select_thali_type {
  margin-top: 39.205rpx;

  .select_thali_type_content {
    padding: 18.75rpx 34.091rpx 17.045rpx 30.682rpx;
    border-radius: 17.045rpx;
    background: #ffffff;

    font-family: "Microsoft YaHei";
    font-size: 30.682rpx;
    font-weight: 400;
    line-height: 40.5rpx;
    text-align: left;

    color: #7eb5f9;

    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 25.568rpx;
  }
}

.recharge_desc {
  font-family: Microsoft YaHei;
  font-size: 20.455rpx;
  font-weight: 290;
  line-height: 37.5rpx;
  text-align: left;
  color: #bababa;
}

.confirm_recharge {
  height: 83.523rpx;
  border-radius: 42.614rpx;
  background: #60a4f7;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 51.136rpx;

  .confirm_recharge_text {
    font-family: "Microsoft YaHei";
    font-size: 25.568rpx;
    font-weight: 400;
    line-height: 34.006rpx;
    text-align: left;
    color: #ffffff;
  }
}

.select_recharge_amount_content_more {
  display: flex;
  flex-direction: column;

  .title {
    font-family: "Microsoft YaHei";
    font-size: 25.568rpx;
    font-weight: 400;
    line-height: 33.75rpx;
    text-align: left;
  }

  .desc {
    font-family: "Microsoft YaHei";
    font-size: 17.045rpx;
    font-weight: 290;
    line-height: 22.67rpx;
    text-align: left;
    color: rgba(96, 164, 247, 0.75);
  }
}
</style>
